<template>
  <div class="controls">
    <input
      autocomplete="off"
      class="itxt"
      :value="currentValue"
      @blur="changeValue"
      @keyup.enter="changeValue"
    />
    <button
      class="plus"
      @click="changeNumber(1)"
      :disabled="currentValue === max"
    >
      +
    </button>
    <!-- :disabled="currentValue === max"当值等于最大值时，禁用按钮 -->
    <button
      class="mins"
      @click="changeNumber(-1)"
      :disabled="currentValue === min"
    >
      -
    </button>
  </div>
</template>

<script>
/*
需求：
  1. 有最小值最大值，且应该是父组件传过来的值
  2. 输入小于最小值，等于最小值
      输入大于最小值，等于最大值
  3. 输入小数，取整
  4. 输入非数字，取上一次的值
*/
export default {
  name: 'InputNumber',
  props: {
    value: {
      type: Number,
      require: true
    },
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      // props数据不可以直接修改，重新定义一个数据
      currentValue: this.value
    }
  },
  methods: {
    // 修改选择的数量
    changeNumber(num) {
      this.currentValue += num
    },

    // 输入框的函数
    changeValue(e) {
      this.currentValue = e.target.value
    }
  },
  watch: {
    currentValue(newVal, oldVal) {
      const { max, min } = this
      // 将数据向上取整并转为number类型
      let newValue = Math.ceil(+newVal)

      // 如果输入的不是数字类型，就取上一次输入的值
      if (Number.isNaN(newValue)) {
        newValue = oldVal
      }

      // 如果输入的值小于最小值，等于最小值，大于最大值，等于最大值
      if (newValue < min) {
        newValue = min
      } else if (newValue > max) {
        newValue = max
      }
      // 修改data中的数据
      this.currentValue = newValue
      // 触发父组件的input事件，更新父组件的值
      this.$emit('input', newVal)
    }
  }
}
</script>

<style lang="less" scoped>
.controls {
  width: 48px;
  position: relative;
  float: left;
  margin-right: 15px;

  .itxt {
    width: 38px;
    height: 37px;
    border: 1px solid #ddd;
    color: #555;
    float: left;
    border-right: 0;
    text-align: center;
  }

  .plus,
  .mins {
    width: 15px;
    text-align: center;
    height: 17px;
    line-height: 17px;
    background: #f1f1f1;
    color: #666;
    position: absolute;
    right: -8px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .mins {
    right: -8px;
    top: 19px;
    border-top: 0;
  }

  .plus {
    right: -8px;
  }

  .plus:disabled,
  .mins:disabled {
    color: #ccc;
    cursor: not-allowed;
  }
}
</style>
